<template>
  <div class="new-menu">
    <!-- 用户信息 -->
    <div>
      <div class="head-portrait">{{ substring }}</div>
    </div>

    <div class="menu-box">
      <!-- 上面菜单 -->
      <div>
        <template v-for="(item, index) in above_menu">
          <div :key="index">
            <div v-if="item.disabled" :class="'menu-item no-click'">
              <el-tooltip content="功能即将上线" placement="right-start">
                <div>
                  <img
                    v-if="item.img_icon"
                    style="height: 18px; width: 18px; margin: 0 auto 3px"
                    :src="item.img_icon"
                  />
                  {{ item.name }}
                </div>
              </el-tooltip>
            </div>

            <div v-else>
              <div
                v-if="!item.noShowFlag"
                :class="
                  activeIndex == index
                    ? 'menu-item menu-item-active'
                    : 'menu-item'
                "
                @click="
                  () => (item.childrenList ? null : changeMenu(index, item))
                "
              >
                <div>
                  <svg-icon
                    v-if="item.icon"
                    class="svg-icon"
                    style="
                      width: 14px;
                      height: 14px;
                      margin-right: 0px;
                      fill: #fff;
                      font-size: 20px;
                    "
                    :iconClass="item.icon"
                  />
                  <i
                    style="font-size: 20px"
                    v-if="item.el_icon"
                    :class="item.el_icon"
                  ></i>
                  <img
                    v-if="item.img_icon"
                    style="height: 14px; width: 14px; margin: 0 auto 3px"
                    :src="item.img_icon"
                  />
                </div>
                {{ item.name }}
              </div>
            </div>
          </div>
        </template>
      </div>

      <!-- 下面菜单 -->
      <div style="margin-top: 20px" v-if="following_menu.length > 0">
        <template v-for="(item, index) in following_menu">
          <div :key="index">
            <div
              v-if="item.secondGroup"
              :class="
                $route.path == '/gisPage/user' ||
                $route.path == '/gisPage/changjing' ||
                $route.path == '/gisPage/shangji' ||
                $route.path == '/gisPage/network'
                  ? gisForm.showLayer
                    ? 'menu-item menu-item-active'
                    : 'menu-item'
                  : 'menu-item no-click'
              "
              @click="() => changeMenu3(index, item)"
            >
              <el-tooltip
                :disabled="
                  $route.path == '/gisPage/user' ||
                  $route.path == '/gisPage/changjing' ||
                  $route.path == '/gisPage/shangji' ||
                  $route.path == '/gisPage/network'
                "
                content="当前页不支持"
                placement="right-start"
              >
                <div>
                  <img
                    v-if="item.img_icon"
                    style="height: 18px; width: 18px; margin: 0 auto 3px"
                    :src="item.img_icon"
                  />
                  {{ item.name }}
                </div>
              </el-tooltip>
            </div>
            <el-tooltip v-else :content="item.tip" placement="right-start">
              <div class="menu-item" @click="() => changeMenu(index, item)">
                <div>
                  <svg-icon
                    v-if="item.icon"
                    class="svg-icon"
                    style="
                      width: 18px;
                      height: 18px;
                      margin-right: 0px;
                      fill: #fff;
                      font-size: 20px;
                    "
                    :iconClass="item.icon"
                  />
                  <i
                    style="font-size: 18px"
                    v-if="item.el_icon"
                    :class="item.el_icon"
                  ></i>
                  <img
                    v-if="item.img_icon"
                    style="height: 18px; width: 18px; margin: 0 auto 3px"
                    :src="item.img_icon"
                  />
                </div>
              </div>
            </el-tooltip>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      activeIndex: 0,
      activeIndex2: -1,
      above_menu: [],
      following_menu: [],
      gis_menu: [],
      routeType: 1,
      authorities: null,
      img_router: '/img/left-menu/'
    }
  },
  watch: {
    '$route.meta.routeType': {
      handler(val, _oldval) {
        if (val != this.routeType) {
          this.routeType = val
          this.judgeMenu()

          if (_oldval != 2 && val == 2) {
            this.$store.commit('gisForm/setShowLayer', true)
          }
        }
      },
      deep: true
    }
  },
  computed: {
    ...mapState(['home', 'gisForm']),
    substring() {
      const name = this.home.userInfoVo.name
      const nameString = name ? name.substring(name.length - 2) : '未知'
      return nameString
    }
  },
  created() {
    this.authorities = this.home.userInfoVo.authorities.split(';')
    // console.log(this.authorities);
    this.judgeMenu()
  },
  methods: {
    /**
     * 切换菜单
     */
    changeMenu(index, item) {
      const path = this.$route.path
      if (path != item.path) {
        this.activeIndex = index
        this.$store.commit('gisForm/setUserLineId', {
          data: null,
          jumpMap: false
        }) //-t
        this.$store.commit('gisForm/setNetwork', null) //-t
        this.$store.commit('gisForm/setIndicator', null) //-t
        if (item.routeAreaType == 1) {
          this.$store.commit('gisForm/setNetwork', '3+') //-t 默认选中所有用户
          this.$store.commit('gisForm/setSceneStatus', true) //默认开启场景数据
        }
        if (item.routeAreaType == 2) {
          let offsetList = this.gisForm.offsetList
          let offset = offsetList && offsetList.find(item => item.value)
          this.$store.commit('gisForm/setNetwork', '1+4') //-t 默认选中4g网络覆盖
          this.$store.commit('gisForm/setOffset', offset.value) //-t 默认选中4g网络覆盖
          this.$store.commit('gisForm/setSceneStatus', true)
          this.$store.commit('gisForm/setStateListStatus', false)
        }
        if (this.$route.meta.routeType == 2 && item.routeAreaType) {
          // gis页面
          this.$store.commit('gisForm/setRouteAreaType', item.routeAreaType)
          // this.$store.commit('gisPage/setIframeUrl', null) -t
        } else if (this.$route.meta.routeType == 2) {
          // 当在gis页面路由时 跳转别的页面 需清空
          this.$store.commit('gisForm/setRouteAreaType', null)
          this.$store.commit('gisForm/setCompare', false)
          this.$store.commit('gisForm/setShowLayer', false)
        }

        if (
          item.path.indexOf('gisPage') == -1 ||
          (this.$route.meta.routeType == 2 &&
            !item.routeAreaType &&
            item.path != '/gisPage/healthCheck')
        ) {
          // 如果 不是gis模块 需要 把gis页面 iframe 设置为空
          if (this.$store.state.gisPage.iframeUrl)
            if (this.$store.state.gisPage.gisObj)
              this.$store.commit('gisPage/setIframeUrl', null)
          // 清空 gisObj
          this.$store.commit('gisPage/setGisObj', null)
        }
        if (
          item.path === '/gisPage' &&
          this.gis_menu &&
          this.gis_menu.length > 0
        ) {
          if (this.gis_menu[0].path) {
            this.$router.push(this.gis_menu[0].path)
          }
        } else {
          if (item.path) {
            this.$router.push(item.path)
          }
        }

        // setTimeout(() => {
        //   window.location.reload()
        // }, 300)
      }
    },

    changeMenu3(index, item) {
      // 打开或者关闭图层
      if (
        this.$route.path == '/gisPage/user' ||
        this.$route.path == '/gisPage/changjing' ||
        this.$route.path == '/gisPage/shangji' ||
        this.$route.path == '/gisPage/network'
      ) {
        this.$store.commit('gisForm/setShowLayer', !this.gisForm.showLayer)
      }
    },

    /**
     * 判断menu菜单
     * routeType:1报告页面
     */
    judgeMenu() {
      const route = this.$route
      const routeType = route.meta.routeType
      this.routeType = routeType
      let real_above_menu = []
      let real_following_menu = []
      if (routeType == 1) {
        // 报告页面
        let { above_menu, following_menu } = this.reportMenu()
        real_above_menu = above_menu
        real_following_menu = following_menu
      } else if (routeType == 2) {
        let { above_menu, following_menu } = this.gisMenu()
        real_above_menu = above_menu
        real_following_menu = following_menu
      } else {
        let { above_menu, following_menu } = this.settingMenu()
        real_above_menu = above_menu
        real_following_menu = following_menu
      }
      // this.gisMenu() -t
      this.above_menu = real_above_menu
      this.following_menu = real_following_menu

      let activeIndex = 0
      // let activeObj = real_above_menu.find((val, i) => {
      //   if (val.path === route.path) {
      //     activeIndex = i
      //   }
      //   return val.path === route.path
      // })
      // console.log(route)
      real_above_menu.forEach((val, i) => {
        if (val.path === route.path) {
          activeIndex = i
        }
        // return val.path === route.path
      })
      // console.log(real_above_menu, activeIndex)
      if (!activeIndex) {
        this.activeIndex = 0
        if (real_above_menu.length > 0) {
          this.$router.push(real_above_menu[0].path)
        }
      } else {
        this.activeIndex = activeIndex
      }

      // 初始化设置 routeAreaType
      if (routeType == 2 && real_above_menu[this.activeIndex].routeAreaType) {
        // gis页面
        this.$store.commit(
          'gisForm/setRouteAreaType',
          real_above_menu[this.activeIndex].routeAreaType
        )
      }
    },

    /**
     * 报告菜单
     */
    reportMenu() {
      let above_menu = [
        {
          name: '当前报告',
          path: '/home/currentPage',
          key: 'current_report',
          el_icon: 'el-icon-tickets'
        },
        {
          name: '历史报告',
          path: '/home/historyPage',
          key: 'history_report',
          img_icon: this.img_router + 'history.png'
        },
        {
          name: 'GIS',
          path: '/gisPage',
          key: 'gis',
          img_icon: this.img_router + 'gis.png'
        }
      ]
      const superAccount = this.home.userInfoVo.superAccount
      /*数据下载
       *superAccount
       *0 普通用户
       *1 超级管理员
       *2 体验用户
       */
      if (superAccount == 1 || superAccount == 0) {
        const obj = {
          name: '数据下载',
          path: '/home/dataDownload',
          key: 'data-download',
          img_icon: this.img_router + 'datadownload.png'
        }
        above_menu.splice(2, 0, obj)
      }

      above_menu = above_menu.filter(x => this.authorities.includes(x.path))
      let following_menu = []
      if (this.authorities.includes('/home/customPage')) {
        following_menu.push({
          name: '', //设置
          path: '/home/customPage',
          key: 'set_up',
          tip: '设置',
          img_icon: this.img_router + 'setting.png'
        })
      }

      following_menu.push({
        name: '', //退出
        path: '/login',
        key: 'exit',
        tip: '退出',
        img_icon: this.img_router + 'login-out.png'
      })
      return { above_menu, following_menu }
    },

    /**
     * 设置页面
     */
    settingMenu() {
      let above_menu = [
        {
          name: '自定义场景',
          path: '/home/customPage',
          key: 'custom_page',
          img_icon: this.img_router + 'custom-edit-scene.png'
        },
        {
          name: '上传工参',
          path: '/home/upload',
          key: 'upload',
          img_icon: this.img_router + 'upload-reference.png'
        },
        {
          name: '上传营业厅',
          path: '/home/uploadBusinessHall',
          key: 'upload_business_hall',
          img_icon: this.img_router + 'upload-business-hall.png'
        },
        {
          name: '对标城市',
          path: '/home/contrastCity',
          key: 'contrast-city',
          img_icon: this.img_router + 'contrast-city.png'
        },
        {
          name: '基础配置',
          path: '/home/baseDeploy',
          key: 'base-deploy',
          img_icon: this.img_router + 'base-deploy.png'
        }

        // {
        //   name: '邮箱配置',
        //   path: '/home/emailDeploy',
        //   key: 'find-log',
        //   disabled: true,
        //   el_icon: 'el-icon-message'
        // },
      ]

      above_menu = above_menu.filter(x => this.authorities.includes(x.path))
      let following_menu = [
        {
          name: '',
          path: '/home/currentPage',
          key: 'back',
          tip: '返回报告',
          img_icon: this.img_router + 'back.png'
        },
        {
          name: '',
          path: '/gisPage',
          key: 'gis',
          tip: 'GIS',
          // el_icon: 'el-icon-s-data'
          img_icon: this.img_router + 'gis.png'
        }
      ]
      following_menu = following_menu.filter(x =>
        this.authorities.includes(x.path)
      )

      following_menu.push({
        name: '', //退出
        path: '/login',
        key: 'exit',
        tip: '退出',
        img_icon: this.img_router + 'login-out.png'
      })

      return { above_menu, following_menu }
    },

    /**
     * gis页面
     */
    gisMenu() {
      const authorityString = this.home.userInfoVo.authorityString
      const authorityList = authorityString ? authorityString.split(',') : []

      const flag = authorityList.indexOf('specialResearch') == -1
      let above_menu = [
        // {
        //   name: '统计报表',
        //   path: '',
        //   key: 'report-form',
        //   disabled: true,
        //   img_icon: this.img_router + 'report-form-unuse.png'
        // },
        {
          name: '用户分析',
          path: '/gisPage/user',
          key: 'user-analyse',
          routeAreaType: 1,
          img_icon: this.img_router + 'user-analyse.png'
        },
        {
          name: '网络评估',
          path: '/gisPage/network',
          key: 'network-analyse',
          routeAreaType: 2,
          img_icon: this.img_router + 'network-analyse.png'
        },
        {
          name: '场景营销',
          path: '/gisPage/changjing',
          key: 'changjing',
          routeAreaType: 3,
          img_icon: this.img_router + 'changjing.png'
        },
        {
          name: '商机预警',
          path: '/gisPage/shangji',
          key: 'shangji',
          routeAreaType: 4,
          img_icon: this.img_router + 'shangji.png'
        },
        {
          name: '渠道选址',
          path: '',
          key: 'channel-selection',
          disabled: true,
          img_icon: this.img_router + 'market-warning-unuse.png'
        },
        {
          name: '漫入漫出',
          path: '/gisPage/immersionAndOverflow',
          key: 'immersion-and-overflow',
          img_icon: this.img_router + 'immersion-and-overflow.png'
        },
        {
          name: '健康检查',
          path: '/gisPage/healthCheck',
          key: 'health-check',
          img_icon: this.img_router + 'health-check.png'
        },

        // {
        //   name: '网络规划',
        //   path: '',
        //   key: 'network-plan',
        //   disabled: true,
        //   img_icon: this.img_router + 'relation-analyse-unuse.png'
        // },
        {
          name: '智能优化',
          path: '/gisPage/intelligentOptimization',
          key: 'intelligent-optimization',
          disabled: true,
          img_icon: this.img_router + 'intelligent-optimization.png'
        },
        {
          name: '专题研究',
          path: '/gisPage/thematic-research',
          key: 'thematic-research',
          routeAreaType: 5,
          noShowFlag: true,
          img_icon: this.img_router + 'thematic-research.png'
        },
        {
          name: '专题研究',
          path: '/gisPage/thematic-card',
          key: 'thematic-card',
          routeAreaType: 5,
          disabled: flag,
          img_icon: this.img_router + 'thematic-research.png'
        },
        {
          name: '专题研究',
          path: '/gisPage/thematic-analyse',
          key: 'thematic-analyse',
          routeAreaType: 5,
          noShowFlag: true,
          img_icon: this.img_router + 'thematic-research.png'
        }
      ]
      above_menu = above_menu.filter(
        x =>
          this.authorities.includes(x.path) ||
          (!x.path && this.authorities.includes(x.key))
      )
      this.gis_menu = above_menu
      let following_menu = [
        {
          name: '图层',
          path: '',
          key: 'tuceng',
          secondGroup: true,
          img_icon: this.img_router + 'gis-layer.png'
        },
        {
          name: '',
          path: '/home/currentPage',
          key: 'back',
          tip: '返回报告',
          img_icon: this.img_router + 'back.png'
        },
        {
          name: '', //设置
          path: '/home/customPage',
          key: 'set_up',
          tip: '设置',
          img_icon: this.img_router + 'setting.png'
        }
      ]

      following_menu = following_menu.filter(
        x =>
          this.authorities.includes(x.path) ||
          (!x.path && this.authorities.includes(x.key))
      )

      following_menu.push({
        name: '', //退出
        path: '/login',
        key: 'exit',
        tip: '退出',
        img_icon: this.img_router + 'login-out.png'
      })
      return { above_menu, following_menu }
    }
  }
}
</script>
<style lang="scss" scoped>
// 第三次迭代 报告页面整体改版 sx
.new-menu {
  width: 70px;
  min-height: 100vh;
  background: #0e2345;
  padding-top: 22px;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: auto;
  /*.new-menu {*/
  /*  width   : 50px;*/
  /*  height  : 200px;*/
  /*  overflow: auto;*/
  /*  float   : left;*/
  /*  margin  : 5px;*/
  /*  border  : none;*/
  /*}*/
  /*.scrollbar {*/
  /*  width : 30px;*/
  /*  height: 300px;*/
  /*  margin: 0 auto;*/
  /*}*/

  .head-portrait {
    width: 54px;
    height: 54px;
    background: #fff;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: #4a6a9f;
    font-size: 18px;
  }
  .user-name {
    font-size: 18px;
    color: #f0f0f0;
    font-weight: 500;
    margin-top: 14px;
    text-align: center;
  }
  .menu-box {
    flex-direction: column;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
    text-align: center;
    font-size: 12px;
  }
  .menu-item {
    padding: 5px 0;
    margin: 1px 5px;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
  }
  .menu-item-active,
  .menu-item:hover {
    background: #41485d;
  }
  .triangle {
    position: absolute;
    right: 0;
    top: 45%;
    width: 0;
    height: 0;
    border: 6px solid;
    border-color: transparent #f5f4f9 transparent transparent;
  }
  .no-click {
    color: #989898;
    cursor: not-allowed;
  }
}
</style>
<style>
.new-menu::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.new-menu::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #616c81;
}
.new-menu::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ededed;
}
</style>
